<template>
  <div class="dashboard-container">
    <div class="filter-container">
      <el-select v-model="roomQuery.building" placeholder="请选择区域" clearable style="width: 200px" class="filter-item" @keyup.enter.native="handleFilter" @change="queryBuildingChange()">
        <el-option v-for="item in buildingOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="roomQuery.floor" placeholder="请选择楼层" clearable style="width: 200px" class="filter-item" @keyup.enter.native="handleFilter">
        <el-option v-for="item in floorOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="roomQuery.rno" placeholder="宿舍号" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item pan-btn yellow-btn" @click="housing(housingVo,'0')">
        离宿
      </el-button>
    </div>
    <el-row :gutter="40" class="panel-group">
      <el-col v-for="(item, index) in list" :key="index" :span="6" class="card-panel-col">
        <el-card :body-style="{ padding: '0px' }">
          <el-carousel indicator-position="outside" height="160px">
            <el-carousel-item v-for="url in item.url.split(',')" :key="url">
              <img :src="url" fit="fill" height="100%" width="100%">
            </el-carousel-item>
          </el-carousel>
          <div style="padding: 14px;">
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="building" /> 区域
                <div class="pull-right">{{ item.building }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="floor" /> 楼层
                <div class="pull-right">{{ item.floor }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="rno" /> 宿舍号
                <div class="pull-right">{{ item.rno }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="people" /> 容量
                <div class="pull-right">{{ item.capacity }}</div>
              </li>
              <li class="list-group-item" :style="{ background: activeColor(item.capacity, item.current) }">
                <svg-icon icon-class="people" /> 剩余容量
                <div class="pull-right">{{ item.capacity - item.current }}</div>
              </li>
            </ul>
            <div class="bottom">
              <el-button type="text" @click="roomDetail(item.id)">详情</el-button>
              <el-divider direction="vertical" />
              <el-button type="text" @click="handleCreate(item.id)">入住</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" style="background-color: rgb(240, 242, 245);" @pagination="getList" />
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" fullscreen>
      <roomInfo :id="roomId" />
    </el-dialog>
    <el-dialog title="入住" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form ref="dataForm" :rules="rules" :model="housingVo" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <!-- <el-form-item label="爱好" prop="hobby">
          <el-input v-model="housingVo.hobby" />
        </el-form-item> -->
        <el-form-item label="爱好" prop="hobby">
          <el-select
            v-model="hobbise"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请输入爱好"
            :change="hobbiseChange()"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="习惯" prop="habit">
          <el-input v-model="housingVo.habit" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入习惯" />
        </el-form-item>
        <el-form-item label="计划" prop="plan">
          <el-input v-model="housingVo.plan" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入计划" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="createData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, buildingList, floorListById, studentHousing } from '@/api/room'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import waves from '@/directive/waves' // waves directive
import RoomInfo from '@/views/studentRoom/roomInfo/roomInfo.vue'
export default {
  components: { Pagination, RoomInfo },
  directives: { waves },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      page: 1,
      limit: 10,
      roomQuery: {
        building: '',
        floor: '',
        rno: ''
      },
      roomId: '',
      buildingOptions: [],
      floorDisabled: true,
      floorOptions: [],
      dialogVisible: false,
      housingVo: {
        hobby: '',
        habit: '',
        plan: ''
      },
      hobbise: [],
      dialogFormVisible: false,
      rules: {
        hobby: [{ required: true, message: '爱好不能为空', trigger: 'blur' }],
        habit: [{ required: true, message: '习惯不能为空', trigger: 'blur' }],
        plan: [{ required: true, message: '计划不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
    buildingList().then((response) => {
      this.buildingOptions = response.data
    })
  },
  methods: {
    getList() {
      this.listLoading = true
      getList(this.page, this.limit, this.roomQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.page = 1
      this.getList()
    },
    activeColor(capacity, current) {
      if (current === 0) {
        return '#13ce66'
      } else if (capacity > current) {
        return '#ffba00'
      } else {
        return '#ff4949'
      }
    },
    queryBuildingChange() {
      this.floorOptions = []
      this.roomQuery.floor = ''
      if (this.roomQuery.building !== '') {
        floorListById(this.roomQuery.building).then(response => {
          this.floorOptions = response.data
          this.floorDisabled = false
        })
      }
    },
    buildingChange() {
      this.floorOptions = []
      this.room.floor = ''
      if (this.room.building !== '') {
        floorListById(this.room.building).then(response => {
          this.floorOptions = response.data
          this.floorDisabled = false
        })
      }
    },
    roomDetail(id) {
      this.roomId = id
      this.dialogVisible = true
    },
    hobbiseChange() {
      if (this.hobbise.length > 0) {
        this.housingVo.hobby = this.hobbise.join(',')
      } else {
        this.housingVo.hobby = ''
      }
    },
    handleCreate(id) {
      this.roomId = id
      this.resethousingVo()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    resethousingVo() {
      this.housingVo = {
        hobby: '',
        habit: '',
        plan: ''
      }
      this.hobbise = []
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.housingVo.roomId = this.roomId
          // console.log(this.housingVo)
          this.housing(this.housingVo, '1')
        }
      })
    },
    housing(housingVo, type) {
      const title = type === '1' ? '入住' : '离宿'
      housingVo.type = type
      this.$confirm(`确定${title}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        studentHousing(housingVo).then(() => {
          this.$message({
            type: 'success',
            message: `${title}成功`
          })
          this.dialogFormVisible = false
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${title}`
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }
}
.bottom {
    float: right;
}
::v-deep .el-dialog {
    background-color: rgb(240, 242, 245);
}
.list-group-striped > .list-group-item {
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.list-group {
	padding-left: 0px;
	list-style: none;
}

.list-group-item {
	border-bottom: 1px solid #e7eaec;
	border-top: 1px solid #e7eaec;
	margin-bottom: -1px;
	padding: 11px 0px;
	font-size: 13px;
}
.pull-right {
	float: right !important;
    padding-top: 5px;
    padding-right: 10px;
}
</style>>
